<template>
    <div class="mu-mask" @click.self="handle" v-show="show">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'mu-mask',
        created: function () {
            this.show = this.value
        },
        data: function () {
            return {
                show: false
            }
        },
        watch: {
            show: function (newVal, oldVal) {
                newVal !== oldVal && this.$emit('input', newVal)
            },
            value: function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.show = newVal
                }
            },
        },
        methods: {
            handle: function () {
                this.isClickHide && this.close()
            },
            close: function () {
                this.show = false
            },
            showing: function () {
                this.show = true
            }
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
            isClickHide: {
                type: Boolean,
                default: true
            }
        }
    }

</script>

<style>


</style>
